import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Button, message } from 'antd';
import Item from './components/Item';
import styles from './testList.less';

@connect(({ unitTest, loading }) => ({
    list: unitTest.list,
    loading: {
        addLoading: !!loading.effects['unitTest/requestAddItem'],
        deleteLoading: !!loading.effects['unitTest/requestDeleteItem'],
        resetLoading: !!loading.effects['unitTest/requestUpdateItem'],
    },
}))
class List extends Component {
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'unitTest/requestList',
            payload: {},
        });
    }

    add = () => {
        const { dispatch } = this.props;
        const payload = {
            type: 'unitTest/requestAddItem',
            payload: {
                timeMap: new Date().getTime() / 1000,
            },
        };
        console.log('payload', payload);
        dispatch(payload);
    };

    reset = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'unitTest/requestUpdateItem',
            payload: {},
        });
    };

    delete = () => {
        const { dispatch, list } = this.props;
        if (list.length < 1) {
            message.info({
                content: '长度必须大于0',
            });
            return;
        }
        const { id } = list[0];
        dispatch({
            type: 'unitTest/requestDeleteItem',
            payload: {
                id,
            },
        });
    };

    render() {
        const { list, loading } = this.props;
        const { addLoading, resetLoading, deleteLoading } = loading;
        return (
            <Fragment>
                list
                <div className={styles.des}>title</div>
                <div className={styles.des}>
                    <h1 className={styles.title}>title</h1>
                    <p className={styles.desText}>11</p>
                    <p className={styles.desText}>22</p>
                </div>
                <Button.Group>
                    <Button loading={addLoading} onClick={this.add}>
                        add
                    </Button>
                    <Button loading={resetLoading} onClick={this.reset}>
                        reset
                    </Button>
                    <Button loading={deleteLoading} onClick={this.delete}>
                        delete
                    </Button>
                </Button.Group>
                <ol>
                    {list.map(item => (
                        <li key={item.id}>
                            <Item time={item} />
                        </li>
                    ))}
                </ol>
            </Fragment>
        );
    }
}
export default List;
